<template >
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <a-card class="common-card flex" :title="title">
      <div class="chart-box" v-for="item in typeList" :key="item.dictCode">
        <BarLine
          class="chart"
          showUnit
          :loading="item.loading"
          :chartData="item.chartData"
          :title="item.itemName"
          v-if="item.itemName.indexOf('及费用') > -1 || item.itemName.indexOf('回收水量') > -1 || item.itemName.indexOf('及用量') > -1 || item.chartType == 'barLine'"
        />
        <Line
          class="chart"
          showUnit
          :loading="item.loading"
          :chartData="item.chartData"
          :title="item.itemName"
          v-else-if="item.itemName.indexOf('吨水单价') > -1  || item.chartType == 'line'"
        />
        <Pie
          class="chart"
          showUnit
          :loading="item.loading"
          :chartData="item.chartData"
          :title="item.itemName"
          v-else-if="item.itemName.indexOf('饼状图') > -1 || item.itemName.indexOf('占比') > -1  || item.chartType == 'pie'"
        />
      </div>
    </a-card>
  </PageWrapper>
</template>
<script setup lang="ts">
  import BarLine from '@/components/Charts/BarLine/index.vue'
  import Line from '@/components/Charts/Line/index.vue'
  import Pie from '@/components/Charts/Pie/index.vue'
  import { ref, onMounted, reactive, defineProps } from 'vue'
  import { PageWrapper } from '@/components/Page'
  import CommonDateSearch from './CommonDateSearch.vue'
  import { getTypeUsageCostChartData, getPieChartChildListData,
    getCOMPREHENSIVESINGLECOST, getDataSingleTotalAndMoreSon,
    getTypeUsageCostChartDatafoByProportion 
  } from '@/api/common/chart'
  import { getDictListByCode } from '@/api/sys/dict'
  import { CommonTypeList } from '@/api/common/model/chart'
import { defHttp } from '@/utils/http/axios'
import { getUrlParams } from '@/utils'

  defineOptions({ name: 'PureWaterRedirect' })
  const props = defineProps({
    dictCode: {
      type: String,
      default: 'pure_water_system_pure_water_overview'
    },
    title: {
      type: String,
      default: '能源成本及用量'
    },
    hasDataType: {
      type: Boolean,
      defualt: true
    }
  })
  const searchRef = ref()
  const searchInfo = reactive({})
  const typeList = ref<CommonTypeList[]>([])

  onMounted(async () => {
    await getTypeList()
    searchRef.value.handleSearch()
  })
  const handleSearch = (params) => {
    Object.assign(searchInfo, params)
    getChartData()
  }
  const getTypeList = async () => {
    const res = await getDictListByCode(props.dictCode)
    typeList.value = res.map((item) => ({
      ...item,
      loading: true,
      chartData: {
        xaxisList: [],
        yaxisList: [],
      },
    }))
  }
  const getChartData = () => {
    typeList.value.forEach((item:any) => {
      item.loading = true
      let api:any = ''
      let chartType = ''
      let rulParams = {}
      if (!item.description || item.description.indexOf('/chart') != 0) {
        api = (item.itemName.indexOf('饼状图')  > -1 || item.itemName.indexOf('占比') > -1) ? getPieChartChildListData 
        : (item.itemName.indexOf('及费用') > -1 || item.itemName.indexOf('回收水量') > -1 || item.itemName.indexOf('及用量') > -1) 
        ? (item.itemName.indexOf('UTT') > -1 || item.itemName.indexOf('CDA') > -1) ? getTypeUsageCostChartDatafoByProportion: getTypeUsageCostChartData : getCOMPREHENSIVESINGLECOST
      } else {
        let url = item.description.split('#')[0]
        chartType = item.description.split('#')[1]
        rulParams = getUrlParams(url)
        console.log(rulParams, 'rulParams')
        api = (params) => defHttp.get({url: url.split('?')[0], params})
      }
      api({
        ...searchInfo,
        dictCode: props.dictCode,
        itemName: item.itemName,
        dataType: props.hasDataType ? 1 : null,
        ...rulParams
      })
        .then((res) => {
          item.chartData = res
          item.chartType = chartType
        })
        .finally(() => {
          item.loading = false
        })
    })
  }
</script>
<style scoped lang="scss">
  .common-card {
    flex: 1;
    overflow: hidden;

    :deep(.ant-card-body) {
      display: flex;
      flex: 1;
      flex-wrap: wrap;

      /* height: 100%; */
      padding: 4px;
      overflow: auto;

      .chart-box {
        flex-shrink: 0;
        width: 50%;
        height: 45%;
        min-height: 240px;
        padding: 4px;
      }
    }
  }
</style>